<template>
  <div
      class="floating-panel"
      :style="{ top: position.top + 'px', left: position.left + 'px' }"
      @mousedown="startDrag"
  >
  <el-row :gutter="20">
<el-col :span="24">



    <div class="panel-header">
      <span>🧩覚え書き</span>
      <el-button type="success" @click="sendData">同步</el-button>
      <div>
        <el-button size="small" @click.stop="toggleCollapse">
          {{ collapsed ? '展开' : '折叠' }}
        </el-button>
      </div>

    </div>

    <transition name="fade">
      <div v-show="!collapsed" class="panel-body">
        <div
            v-for="(item, index) in items"
            :key="index"
            class="panel-item"
        >
          <div class="panel-item-row">
            <el-input
                type="textarea"
                v-model="item.text"
                :rows="3"
                placeholder="请输入内容..."
                class="text-input"
            />
            <div>
              <el-button
                  size="small"
                  type="danger"
                  @click="removeItem(index)"
              >
                删除
              </el-button>
            </div>

          </div>
        </div>

        <el-button
            type="primary"
            size="small"
            @click="addItem"
            class="add-btn"
        >
          ➕ 添加列表项
        </el-button>
      </div>
    </transition>
</el-col>
  </el-row>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import {ElMessage} from "element-plus";

const position = reactive({ top: 100, left: 100 })
const dragging = ref(false)
let offset = { x: 0, y: 0 }

const collapsed = ref(true)
const items = ref([{ text: '' }])

const toggleCollapse = () => {
  collapsed.value = !collapsed.value
}

const addItem = () => {
  items.value.push({ text: '' })
}

const removeItem = (index) => {
  items.value.splice(index, 1)
}
// 发送到后端的函数
const sendData = async () => {
  try {
    const res = await axios.post('/api/notes', { items: items.value })
    console.log('后端返回：', res.data)
    ElMessage.success('同步成功')
  } catch (err) {
    console.error('请求错误：', err)
    ElMessage.error('同步失败')
  }
}
// 可选：存储完整后端返回的数据
const backendData = ref({ username: '', userpwd: 0, stars: [] })



const startDrag = (e) => {
  if (e.target.closest('.panel-header')) {
    dragging.value = true
    offset.x = e.clientX - position.left
    offset.y = e.clientY - position.top
    document.addEventListener('mousemove', onDrag)
    document.addEventListener('mouseup', stopDrag)
  }
}

const onDrag = (e) => {
  if (dragging.value) {
    position.left = e.clientX - offset.x
    position.top = e.clientY - offset.y
  }
}

const stopDrag = () => {
  dragging.value = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
}

onBeforeUnmount(() => {
  stopDrag()
})

onMounted(async () => {
  // 计算面板宽度（和样式中保持一致）
  const panelWidth = 300
  // 让面板靠右上角，距离右侧留一点空隙
  position.left = window.innerWidth - panelWidth - 5
  position.top = 10

  try {
    const res = await axios.post('/api/notes/get')
    console.log('获取到的后端数据：', res.data)

    // 初始化 items
    if (res.data.items && Array.isArray(res.data.items)) {
      items.value = res.data.items
    }

    // 保存完整数据
    backendData.value = res.data

  } catch (err) {
    console.error('获取初始数据错误：', err)
  }
})
</script>

<style scoped>
.floating-panel {
  position: fixed;
  z-index: 9999;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  width: 300px;
  cursor: move;
  user-select: none;
}

.panel-header {
  background: #409eff;
  color: white;
  padding: 8px 10px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.panel-body {
  padding: 10px;
  cursor: default;
}

.panel-item {
  margin-bottom: 10px;
}

.panel-item-actions {
  margin-top: 4px;
  text-align: right;
}

.add-btn {
  width: 100%;
  margin-top: 5px;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.9);
}
.panel-item-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.text-input {
  flex: 1;

}


</style>
